@import url("https://fonts.googleapis.com/css?family=Press+Start+2P:400");
#banner>i {
    margin: -100%;
    text-align: center;
    padding-right: 30px;
    width: 190px;
    height: 190px;
}
@keyframes banner{
    0%{
        color:hsl(0,50%,35%);
        height:0px;
        width: 0px;
        margin-left: -190px;
        opacity:0;
        text-shadow:0 0 40px #222,0 0 20px #222,0 0 10px #222,0 0 80px #222;
        letter-spacing:200px;
        transform:scale(1.3)
    }
    60%{
        opacity:1;
        letter-spacing:auto;
        transform:scale(1)
    }
    80%{
        color:hsl(0,50%,35%);
        height:0px;
        width: 0px;
        margin-left: -190px;
        text-shadow:0 0 1px #000;
    }
    100%{
        margin-left: 0px;
        text-shadow:auto;
    }
}
@-webkit-keyframes banner{
    0%{
        color:hsl(0,50%,35%);
        height:0px;
        width: 0px;
        margin-left: -190px;
        opacity:0;
        text-shadow:0 0 40px #222,0 0 20px #222,0 0 10px #222,0 0 80px #222;
        letter-spacing:200px;
        transform:scale(1.3)
    }
    60%{
        opacity:1;
        letter-spacing:auto;
        transform:scale(1)
    }
    80%{
        color:hsl(0,50%,35%);
        height:0px;
        width: 0px;
        margin-left: -190px;
        text-shadow:0 0 1px #000;
    }
    100%{
        margin-left: 0px;
        text-shadow:auto;
    }
}
#banner{
    font-family:"Press Start 2P",sans-serif;
    position: relative;
    font-weight:400;
    color:#EEE;
    font-size:1000%;
    text-shadow:1px 1px 0 hsl(0,50%,39%),2px 2px 0 hsl(0,50%,38%),3px 3px 0 hsl(0,50%,37%),4px 4px 0 hsl(0,50%,36%),5px 5px 0 hsl(0,50%,34%),6px 6px 0 hsl(0,50%,32%),7px 7px 0 hsl(0,50%,31%),8px 8px 0 hsl(0,50%,30%),-1px -1px 0 hsl(0,50%,39%),-2px -2px 0 hsl(0,50%,38%),-3px -3px 0 hsl(0,50%,37%),-4px -4px 0 hsl(0,50%,36%),-5px -5px 0 hsl(0,50%,34%),-6px -6px 0 hsl(0,50%,32%),-7px -7px 0 hsl(0,50%,31%),-8px -8px 0 hsl(0,50%,30%),-1px 1px 0 hsl(0,50%,39%),-2px 2px 0 hsl(0,50%,38%),-3px 3px 0 hsl(0,50%,37%),-4px 4px 0 hsl(0,50%,36%),-5px 5px 0 hsl(0,50%,34%),-6px 6px 0 hsl(0,50%,32%),-7px 7px 0 hsl(0,50%,31%),-8px 8px 0 hsl(0,50%,30%),1px -1px 0 hsl(0,50%,39%),2px -2px 0 hsl(0,50%,38%),3px -3px 0 hsl(0,50%,37%),4px -4px 0 hsl(0,50%,36%),5px -5px 0 hsl(0,50%,34%),6px -6px 0 hsl(0,50%,32%),7px -7px 0 hsl(0,50%,31%),8px -8px 0 hsl(0,50%,30%);
    display:block;
    height:190px;
    width: 190px;
    line-height: 190px;
    border-radius: 50%;
    background: hsl(0,50%,39%);
    background-image: linear-gradient(to bottom right, hsl(0,50%,38%), hsl(0,50%,30%));
    margin: auto;
}
.b-select-wrap > select {
    color:#0645AD;
}
.center {
    width: 100%;
    text-align: center;
    margin: auto;
    display:block;
    height:190px;
    width: 190px;

}
.rows {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}
